/<template>
  <!-- 抖音小程序提交审核 -->
  <div class="submitContent">
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="top"
      class="formData"
    >
      <el-form-item
        label="选择合同或版本剧"
        prop="playlet_id"
      >
        <el-select
          v-model="formData.playlet_id"
          filterable
          remote
          clearable
          :disabled="row.id?true:false"
          placeholder="请选择"
          style="width: 100%;"
        >
          <el-option
            v-for="(item, index) in optionsList.playlet_id"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="提审小程序"
        prop="mini_app_id"
      >
        <el-select
          v-model="formData.mini_app_id"
          clearable
          filterable
          remote
          style="width: 100%;"
          placeholder="请选择"
        >
          <el-option
            v-for="(item) in optionsList.mini_app_id"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :disabled="item.app_type==1"
            style="display: flex; align-items: center;"
          >
            <span style="float: left;margin-right:10px;">{{ item.name }}</span>
            <svg-icon
              v-if="item.app_type==1"
              style="float: right;"
              icon-class="miniapp"
              class="imageIcon"
            />
            <svg-icon
              v-else
              style="float: right;"
              icon-class="douyin"
              class="imageIcon"
            />
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="短剧推荐语"
        prop="recommendation"
      >
        <el-input
          v-model="formData.recommendation"
          clearable
          maxlength="12"
          placeholder="请输入不超过12汉字以内"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="抖音短剧类目标签(≤3个)"
        prop="tag_list"
      >
        <el-select
          v-model="formData.tag_list"
          clearable
          multiple
          filterable
          remote
          :multiple-limit="3"
          style="width: 100%;"
          placeholder="请选择"
        >
          <el-option
            v-for="(item) in optionsList.tag_list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="display: flex; align-items: center;"
          >
            <span style="float: left;margin-right:10px;">{{ item.label }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="资质状态"
        prop="qualification"
      >
        <el-radio-group v-model="formData.qualification">
          <el-radio
            v-for="(item,index) in statusList"
            :key="index"
            :label="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-if="formData.qualification == 2"
        class="rowFlex"
        style="width:100%;"
      >
        <el-form-item
          label="备案类型"
          prop="record_type"
        >
          <div class="rowFlex allCenter">
            <el-select
              v-model="formData.record_type"
              clearable
              style="width: 100%;margin-right:20px;"
              placeholder="请选择"
            >
              <el-option
                v-for="(item,index) in recordTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label=""
          prop="record_value"
        >
          <div class="rowFlex">
            <el-input
              v-model="formData.record_value"
              clearable
              style="margin-top:32px;"
              placeholder="请输入"
            ></el-input>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <!-- 抖音提交审核 -->
    <span
      v-if="!repeatExamine"
      class="dialog-footer rowFlex"
    >
      <el-button
        class="btn"
        @click="onclose"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="onsubmit"
      >确 定</el-button>
    </span>
    <!-- 重新提审 -->
    <span
      v-else
      class="dialog-footer rowFlex"
    >
      <el-button
        class="btn"
        @click="lastStep"
      >上一步</el-button>
      <el-button
        class="btn"
        type="primary"
        @click="repeatSubmit"
      >重新提审</el-button>
    </span>
  </div>
</template>

<script>
import { contractPlayList, dyCheckInfo } from '@/api/examine'
import { miniAppList, commonData } from '@/api/common'
import { dyTagList, dyCheck } from '@/api/examine'
export default {
  name: 'DySubmitReview',
  props: {
    row: {
      type: Object,
      default: () => {}
    },
    repeatExamine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      statusList: [
        {
          label: '未报审',
          value: 1
        },
        {
          label: '报审通过',
          value: 2
        },
        {
          label: '报审不通过',
          value: 3
        },
        {
          label: '不建议报审',
          value: 4
        }
      ],
      recordTypeList: [
        {
          label: '许可证号',
          value: 1
        },
        {
          label: '登记号',
          value: 2
        },
        {
          label: '普通备案号',
          value: 3
        },
        {
          label: '重点备案号',
          value: 4
        }
      ],
      rules: {
        playlet_id: [{ required: true, message: '请选择短剧', trigger: 'blur' }],
        mini_app_id: [{ required: true, message: '请选择提审小程序', trigger: 'change' }],
        recommendation: [{ required: true, message: '请输入短剧推荐语', trigger: 'blur' }],
        tag_list: [{ required: true, message: '请选择抖音短剧类目标签', trigger: 'change' }],
        qualification: [{ required: true, message: '请选择资质状态', trigger: 'change' }],
        record_type: [{ required: true, message: '请选择备案类型', trigger: 'change' }],
        record_value: [{ required: true, message: '请输入备案号', trigger: 'blur' }]
      },
      formData: {
        mini_app_id: '',
        recommendation: '',
        tag_list: [],
        qualification: 1,
        record_type: 1,
        record_value: '',
        playlet_id: ''
      },
      optionsList: {
        playlet_id: [],
        mini_app_id: [],
        tag_list: []
      }
    }
  },
  mounted() {
    this.getContractPlayList()
    this.onGetMiniAppList()
    this.getTagList()

    // 重新提审的时候 获取审核资料
    if (this.repeatExamine) {
      this.dyCheckInfo()
    }
  },
  methods: {
    // 获取抖音提审材料
    async dyCheckInfo() {
      console.log('获取抖音提审材料')
      const res = await dyCheckInfo({ playlet_audit_id: this.row.id })
      if (res.data) {
        const { recommendation, tag_list, qualification, record_type, record_value } = res.data
        this.formData = {
          mini_app_id: this.row.mini_app_id,
          recommendation: recommendation || '',
          tag_list: tag_list || [],
          qualification: Number(qualification) || '',
          record_type: Number(record_type) || '',
          record_value: record_value || '',
          playlet_id: Number(this.row.playlet_id)
        }
      }
    },
    async getTagList() {
      const res = await dyTagList()
      const list = []
      if (res && res.data.tagList) {
        for (const key in res.data.tagList) {
          list.push({ label: res.data.tagList[key], value: key })
        }
        this.optionsList.tag_list = list
      }
    },
    async onGetMiniAppList() {
      const res = await miniAppList()
      if (res.status_code == 1) {
        this.optionsList.mini_app_id = res.data.filter((item) => item.app_type == 2 && (item.name == '顶好剧院' || item.name == '顶好剧场'))
      }
    },
    async getContractPlayList() {
      const res = await contractPlayList()
      if (res.status_code === 1) {
        this.optionsList.playlet_id = res.data
      }
    },
    async onPlayletCheck() {
      this.loading = true
      const res = await dyCheck(this.formData)
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.$emit('ok')
      }
      this.loading = false
    },
    onsubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.onPlayletCheck()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    repeatSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.onPlayletCheck()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 上一步
    lastStep() {
      this.$emit('lastStep')
    },
    onclose() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.submitContent {
  height: auto;
  min-height: 100%;
  padding: 0;
  .formData {
    padding: 20px 20px 0 20px;
    position: relative;
  }
}
::v-deep.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
  font-weight: 500;
}
::v-deep.avatar-uploader {
  display: flex !important;
}
::v-deep .el-select__tags {
  max-width: 100% !important;
}
</style>
<style lang="scss">
.dialog-footer {
  padding-right: 20px;
}
</style>